<script lang="ts">
import store from '@/store/index.js'
import { showConfirmDialog, showToast } from 'vant'
import { getPayBankAccountInfo, findDefault, pointsBal, setDetailAddress, saveBill } from '@/api/orderPos'
// eslint-disable-next-line no-undef
export default defineComponent({
    name: 'confirmOrder',
    setup() {
      
        // eslint-disable-next-line no-undef
        const router = useRouter()
        const route = useRoute()
        // eslint-disable-next-line no-undef
        const state = reactive<any>({
            posDetail: {} as any, // 购买的某个机具详情
            number: 0 as any, // 购买的某个机具数量
            ctperIntegral: 300 as any, // 后买机具的积分大机300
            dqperIntegral: 200 as any, // 后买机具的积分电签200
            underLineInfo: {} as any, // 收款信息
            addressObj: {
                receiveName: '请选择地址'
            } as any, // 选择的地址信息
            payType: 'POINTS' as any, // 支付方式
            businessType: ['ONLINE', 'OFFLINE'] as any, //采购方式 线上 线下
            deductionType: 'INTEGRAL' as any, //抵扣类型 积分
            divide: 0 as any,
            canuse: 0 as any,
            deduct: 0 as any,
            isYingkePoints: null
        })
        // eslint-disable-next-line no-undef
        onActivated(() => {
            state.payType = 'POINTS'
            state.isYingkePoints = route.query.isYingkePoints
            state.addressObj = store.state.posOrder.ADDRESS
            state.posDetail = store.state.posOrder.DETAIL
            state.number = store.state.posOrder.NUM
            choosePayType('POINTS')
        })

        // 查询收款信息
        const queryPAyBank = () => {
            getPayBankAccountInfo({}).then(res => {
                state.underLineInfo = res.object
            })
        }

        // 查默认地址信息
        const getFindDefault = () => {
            findDefault({}).then(res => {
                if (res.object) {
                    state.addressObj = res.object
                    store.dispatch('posOrder/GetAddress', res.object)
                }
            })
        }
        getFindDefault()
        const selectAddress = () => {
            router.push({
                path: '/addressList'
            })
        }
        const getPointsBal = () => {
            pointsBal({}).then(res => {
                state.divide = res.object.aviBal
                state.deduct = state.number * state.posDetail.PRICE
                if (state.posDetail.USE_TYPE == 'DQPOS') {
                    state.canuse = state.number * state.dqperIntegral
                } else {
                    state.canuse = state.number * state.ctperIntegral
                }
            })
        }
        // queryPAyBank()
        const choosePayType = payType => {
            //查询账户积分情况
            getPointsBal()
            state.payType = payType
        }
        const confirmNo = () => {
            console.log(1)
            showToast('余额不足')
        }
        const confirmPay = () => {
            if (!state.addressObj.id) {
                showToast('请选择地址')
                return
            }
            const data = {
               
                isYingkePoints: state.isYingkePoints == 'true' || state.isYingkePoints == true ? 'true' : 'false',
                priceAll: (state.number * state.posDetail.PRICE).toFixed(2),
                productPriceId: state.posDetail.PRODUCT_PRICE_ID,
                salesBillBean: {
                    agencySource: route.query.agencySource,
                    businessType: state.payType === 'OFFLINE' ? state.businessType[1] : state.businessType[0], // 采取方式
                    deductionType: state.payType === 'POINTS' ? state.deductionType : undefined, //抵扣类型：只有积分类型有此字段
                    deductionAmount: state.payType === 'POINTS' ? state.deduct : undefined, //抵扣金额
                    addressId: state.addressObj.id //收货地址ID
                },
                detailBean: {
                    componentType: state.posDetail.COMPONENT_TYPE,
                    useType: state.posDetail.USE_TYPE,
                    count: state.number,
                    price: state.posDetail.PRICE
                },
                salesPaymentBillBean: {
                    payWay: state.payType
                }
            }
            store.dispatch('posOrder/GetUploadInfo', data)
            showConfirmDialog({
                title: '设置默认地址',
                message: `确认使用${state.canuse}积分购买${state.number}台机器${state.posDetail.NAME}吗？`,
                confirmButtonColor: '#66d6ff'
            })
                .then(() => {
                    saveBill(data).then(res => {
                        router.push({
                            path: '/payWait'
                        })
                    })
                })
                .catch(() => {
                    // on cancel
                })
        }
        choosePayType('POINTS')
        return {
            ...toRefs<any>(state),
            choosePayType,
            confirmNo,
            confirmPay,
            selectAddress
        }
    }
})
</script>

<template>
    <div class="wrapper">
        <div class="addFlex">
            <div class="flexTop">
                <div class="address" @click="selectAddress">
                    <div class="left">
                        <img src="@/assets/index/address.png" alt="" />
                    </div>
                    <div class="center">
                        <div class="top">
                            <span class="name">{{ addressObj.receiveName || '请选择地址' }}</span>
                            <span class="phone">{{ addressObj.receiveTelephone || '暂未选择地址' }}</span>
                        </div>
                        <div class="bottom">{{ addressObj.receiveAddress || '暂未选择地址' }}</div>
                    </div>
                    <div class="right">
                        <img src="@/assets/toRight.png" alt="" />
                    </div>
                </div>
                <div class="posInfo">
                    <div class="left">
                        <!-- <img src="@/assets/posImg/AF68.png" /> -->
                        <img src="@/assets/posImg/dq.jpg" v-if="posDetail.USE_TYPE == 'DQPOS'" />
                        <img src="@/assets/posImg/ct.jpg" v-else />
                    </div>
                    <div class="right">
                        <div class="name">{{ posDetail.NAME }}（{{ posDetail.COMPONENT_TYPE }}）</div>
                        <div class="price">{{ posDetail.PRICE }}积分/台</div>
                        <div class="num">× {{ number }} 台</div>
                    </div>
                </div>
                <div class="payType">
                    <!--                    <div class="wx" @click="choosePayType('WX')">-->
                    <!--                        <div class="left">-->
                    <!--                            <img src="@/assets/wx.png" alt="" />-->
                    <!--                        </div>-->
                    <!--                        <div class="center">微信支付</div>-->
                    <!--                        <div class="right">-->
                    <!--                            <img src="@/assets/choose.png" alt="" v-show="payType === 'WX'" />-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <div class="zfb" @click="choosePayType('ZFB')">-->
                    <!--                        <div class="left">-->
                    <!--                            <img src="@/assets/zfb.png" alt="" />-->
                    <!--                        </div>-->
                    <!--                        <div class="center">支付宝支付</div>-->
                    <!--                        <div class="right">-->
                    <!--                            <img src="@/assets/choose.png" alt="" v-show="payType === 'ZFB'" />-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <div class="jf" @click="choosePayType('POINTS')">
                        <div class="left">
                            <img src="@/assets/inte.png" alt="" />
                        </div>
                        <div class="center">积分支付</div>
                        <div class="right">
                            <img src="@/assets/choose.png" alt="" />
                        </div>
                    </div>
                </div>
                <div class="proceeds" v-show="payType === 'OFFLINE'">
                    <div class="item">
                        <div class="label">备注：</div>
                        <div class="value">
                            <input type="text" style="width: 250px" placeholder="20字以内" />
                        </div>
                    </div>
                </div>
                <div class="integral">
                    <div class="top" style="border-bottom: 1px solid #ccc">
                        <div class="left">
                            <span>积分余额：{{ divide }}</span>
                        </div>
                        <div class="center">使用：{{ canuse }}</div>
                    </div>
                    <div class="bottom1">
                        <div class="left">
                            <span>抵扣金额：</span>
                        </div>
                        <div class="right">- {{ deduct }}</div>
                    </div>
                </div>
            </div>
            <div class="flexBottom">
                <div class="footer">
                    <div class="total">
                        <div v-show="payType !== 'POINTS'">
                            <span>共：{{ number }}台，</span>
                            合计：
                        </div>
                        <div>
                            <div v-if="payType == 'POINTS'" style="font-size: 14px">总计{{ number * posDetail.PRICE }}积分</div>
                        </div>
                    </div>
                    <div class="button no" @click="confirmNo" v-if="payType === 'POINTS' && canuse > divide">余额不足</div>
                    <div class="button" v-else @click="confirmPay">确认采购</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper {
    box-sizing: border-box;
    .addFlex {
        height: 100vh;
        display: flex;
        flex-direction: column;
        .flexTop {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            overflow: scroll;
        }
        .flexBottom {
            flex-shrink: 0;
        }
    }
    .address {
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        .left {
            img {
                width: 24px;
            }
        }
        .center {
            height: 100%;
            flex: 1;
            padding: 0 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .top {
                .name {
                    font-size: 14px;
                    color: #000000;
                }
                .phone {
                    color: #9a9a9a;
                    margin-left: 10px;
                    font-size: 13px;
                }
            }
            .bottom {
                font-size: 10px;
                margin-top: 10px;
                color: #9a9a9a;
                line-height: 14px;
            }
        }
        .right {
            img {
                width: 14px;
            }
        }
    }
    .posInfo {
        margin-top: 10px;
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        box-sizing: border-box;
        height: 100px;
        padding: 10px;
        display: flex;
        .left {
            img {
                // height: 80px;
                width: 50px;
            }
        }
        .right {
            padding: 0 10px;
            box-sizing: border-box;
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
                color: #000000;
            }
            .price {
                color: #ff0000;
            }
            .num {
                text-align: right;
            }
        }
    }
    .payType {
        padding: 0 10px;
        margin-top: 10px;
        border-radius: 6px;
        background: #ffffff;
        .wx,
        .zfb,
        .xx,
        .jf {
            border-bottom: 1px solid #f5f5f5;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            align-items: center;
            .left {
                img {
                    width: 16px;
                }
            }
            .center {
                padding: 0 15px;
                flex: 1;
                font-size: 14px;
            }
            .right {
                display: flex;
                align-items: center;
                img {
                    width: 20px;
                }
            }
        }
        .jf {
            border: none;
        }
    }
    .proceeds {
        background: #ffffff;
        opacity: 1;
        margin-top: 10px;
        border-radius: 6px;
        .item {
            padding: 13px;
            display: flex;
            .label {
                width: 80px;
                color: #9a9a9a;
            }
            .value {
                flex: 1;
            }
            .right {
                margin-left: 5px;
                img {
                    width: 12px;
                }
            }
        }
    }
    .integral {
        margin-bottom: 10px;
        background-color: #ffffff;
        padding: 20px;
        margin-top: 10px;
        border-radius: 12px;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            .left,
            .center {
            }
            .left {
                display: flex;
                align-items: center;
            }
            .right {
                flex: 1;
                height: 20px;
                text-align: right;
                .switchImg1 {
                    width: 40px;
                }
            }
        }
        .bottom1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            .left {
                display: flex;
                align-items: center;
            }
            .right {
                text-align: right;
            }
            .what {
                width: 15px;
                margin-left: 10px;
            }
        }
    }

    .footer {
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        .total {
            font-size: 15px;
            display: flex;
            align-items: center;
        }

        .button {
            padding: 10px 10px;
            background: #66d6ff;
            border-radius: 6px;
            font-size: 13px;
            color: #ffffff;
            text-align: center;
        }
        .button.no {
            padding: 10px;
            background: #7f97fa;
            border-radius: 7px;
            font-size: 13px;
            color: #ffffff;
            text-align: center;
        }
    }
}
</style>
